﻿@{
	var a = ViewData["sgd"] as List<SGD>;
}
@using HrEFCore
@model SG
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="~/aa/vue/dist/vue.js"></script>
	<script src="~/aa/element-ui/lib/index.js"></script>
	<link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
	<script src="~/aa/axios/dist/axios.js"></script>
	<script src="~/aa/echarts.js"></script>
	<link rel="stylesheet" href="../../css/table.css" type="text/css" />
	<title>无标题文档</title>
	<style type="text/css">
		body {
			background: rgb(253,244,227);
		}

		.TD_STYLE1 {
			background: #E6DDCE;
			/* color:white; */
		}

		.TD_STYLE2 {
			background: rgb(253,244,227);
		}

		.INPUT_STYLE2 {
			background: rgb(253,244,227);
		}
	</style>
</head>

<body>
	<div id="sg">
		<form method="post" action="/SG/Update">
			<table width="100%">
				<tr>
					<td style="text-align:left;">
						<font color="black">您正在做的业务是:人力资源管理--薪酬发放管理--薪酬发放复核</font>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: right">
						<input type="submit" value="复核通过" class="BUTTON_STYLE1">
						<input type="button" value="返回" class="BUTTON_STYLE1"
							   onclick="history.back();">
					</td>
				</tr>

				<tr>
					<td colspan="2" style="text-align: left">

						<input type="hidden" id="SgrId" name="SgrId" value="@Model.SgrId">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: left">
						薪酬单编号：@Model.SalaryGrantId
						<input type="hidden" name="SalaryGrantId" value="@Model.SalaryGrantId">
						<input type="hidden" name="StandardId" v-model="salaryStandardId" value="@Model.SalaryStandardId">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: left">
					</td>
				</tr>
				<tr>
					<td style="text-align: left">
						本机构总人数:{{HumanAmount}}
						<input type="hidden" name="HumanAmount" value="@Model.HumanAmount">
						，基本薪酬总数:@Model.SalaryStandardSum<input type="hidden" name="SalaryStandardSum" value="@Model.SalaryStandardSum" />
						，实发总额:<span id="SalaryPaidSum">{{SalaryPaidSum}}</span>
						<input type="hidden" name="SalaryPaidSum" onkeyup="countMoney(this)" readonly value="@Model.SalaryPaidSum" />
						<input type="hidden" name="Register" value="@ViewBag.uname" />
						<input type="hidden" name="RegistTime" value="@Model.RegistTime" />
					</td>
					<td style="text-align: right">

						复核人:<input type="text" name="Checker" id="Checker" value="@ViewBag.uname" readonly="readonly">
						复核时间：<span id="Tdate"></span>
						<input type="hidden" name="CheckTime" id="CheckTime">
					</td>
				</tr>
			</table>
			<div>
				@* <table width="100%" border="1" cellpadding=0 cellspacing=1
				bordercolorlight=#848284 bordercolordark=#eeeeee
				class="TABLE_STYLE1">
				<tr>
				<td class="TD_STYLE1">
				<span>序号</span>
				</td>
				<td class="TD_STYLE1">
				<span>档案编号</span>
				</td>
				<td class="TD_STYLE1">
				<span>姓名</span>
				</td>

				<td class="TD_STYLE1">
				薪酬基本明细
				</td>

				<td class="TD_STYLE1" width="7%">
				奖励金额
				</td>
				<td class="TD_STYLE1" width="7%">
				销售绩效总额
				</td>
				<td class="TD_STYLE1" width="7%">
				应扣金额
				</td>
				<td class="TD_STYLE1" width="7%">
				实发金额
				</td>

				</tr>
				<input type="hidden" name="SalaryGrantId" value="@Model.SalaryGrantId">
				<input type="hidden" id="SalaryStandardSum" onkeyup="countMoney(this)" name="SalaryStandardSum" value="@Model.SalaryStandardSum" />
				@foreach (SGD sgd in @a)
				{
				<tr class="TD_STYLE2">

				<td>
				@sgd.GrdId
				<input type="hidden" name="GrdId" value="@sgd.GrdId" />
				</td>
				<td>
				@sgd.HumanId
				<input type="hidden" name="HumanId" value="@sgd.HumanId" />
				</td>
				<td>
				@sgd.HumanName
				<input type="hidden" name="HumanName" value="@sgd.HumanName" />
				</td>
				<td>
				<a href="#" v-on:click="xs()">详细内容</a>
				</td>
				<td>
				<input type="text" name="BounsSum" onkeyup="countMoney(this)" value="@sgd.BounsSum" />
				</td>
				<td>
				<input type="text" name="SaleSum" onkeyup="countMoney(this)" value="@sgd.SaleSum" />
				</td>
				<td>
				<input type="text" name="DeductSum" onkeyup="countMoney(this)" value="@sgd.DeductSum" />
				</td>

				<td>
				<input type="text" name="SalaryPaidSum" onkeyup="countMoney(this)" readonly value="@Model.SalaryPaidSum" />
				</td>
				</tr>
				}
				</table> *@
			</div>
			<template>
				<el-table :data="tableData"
						  border
						  style="width: 100%">
					<el-table-column prop="grdId"
									 label="序号"
									 width="180">
					</el-table-column>
					<el-table-column prop="humanId"
									 label="档案编号"
									 width="180">
					</el-table-column>
					<el-table-column prop="humanName"
									 label="姓名">
					</el-table-column>
					<el-table-column prop="xx"
									 label="详细信息">
						<template slot-scope="scope">
							<el-button type="text" v-on:click="tk()">详细信息</el-button>
						</template>
					</el-table-column>
					<el-table-column label="奖励金额"
									 prop="bounsSum"
									 label-width="100px">
						<template slot-scope="scope">
							<el-input placeholder="奖励金额" v-model="scope.row.bounsSum"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="销售绩效总额"
									 prop="saleSum"
									 label-width="100px">
						<template slot-scope="scope">
							<el-input placeholder="销售绩效总额" v-model="scope.row.saleSum"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="应扣金额"
									 prop="deductSum"
									 label-width="100px">
						<template slot-scope="scope">
							<el-input placeholder="应扣金额" v-model="scope.row.deductSum"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="实发金额"
									 prop="salaryPaidSum"
									 label-width="100px">
						<template slot-scope="scope">
							<el-input v-model="calculateSalaryPaidSum[scope.$index]"></el-input>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</form>
		<el-table :data="list"
				  border
				  v-if="false"
				  style="width: 100%">
			<el-table-column prop="standardId"
							 label="薪酬编号"
							 width="180">
			</el-table-column>
			<el-table-column prop="itemName"
							 label="项目名称"
							 width="180">
			</el-table-column>
			<el-table-column prop="salary"
							 label="金额">
			</el-table-column>
		</el-table>
		<template>
			<el-dialog title="详细内容"
					   :visible.sync="dialogVisible"
					   width="60%"
					   :before-close="handleClose">

				<div ref="mainDiv" style="width: 600px;height:400px;"></div>
			</el-dialog>
		</template>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#sg",
			data: {
				dialogVisible: false,
				list: [],
				tableData: [],
				salaryStandardId: "",
				mainDivRef: null,
				SalaryPaidSum: "",
				HumanAmount: "",
				salaryGrantId: "",
				humanAmount: "",
				SGD: {
					BounsSum: "",
					SaleSum: "",
					DeductSum: "",
					SalaryPaidSum: "",
				},
			},
			methods: {
				handleClose: function () {
					this.dialogVisible = false;
					this.$nextTick(function () {
						this.mainDivRef = this.$refs.mainDiv;
						var myChart = echarts.init(this.mainDivRef);
						var option = {
							/* 设置图表标题 */
							title: {
								text: '详细信息'
							},
							tooltip: {},
							legend: {
								data: []
							},
							/* 设置图表x轴和y轴 */
							xAxis: {
								type: 'category',
								data: []
							},
							yAxis: {
							},
							/* 设置图表系列（数据） */
							series: [{
								name: '薪资',
								data: [],
								type: 'bar'
							}]
						};
						axios.get("/SG/SSDSelect", {
							params: {
								StandardId: this.salaryStandardId
							}
						}).then(res => {
							/* this.list = res.data; */
							var list = res.data;
							var itemNames = [];
							var salarys = [];
							list.forEach(function (item) {
								itemNames.push(item.itemName);
								salarys.push(item.salary);
							});
							option.xAxis.data = itemNames;
							option.series[0].data = salarys;
							option.legend.data = ['薪资'];

							/* 使用配置项渲染图表 */
							myChart.setOption(option);

						}).catch(err => {
							console.log(err);
						});

					});

				},

				tk: function () {
					this.$nextTick(function () {
						this.mainDivRef = this.$refs.mainDiv;
						var myChart = echarts.init(this.mainDivRef);
						var option = {
							/* 设置图表标题 */
							title: {
								text: '详细信息'
							},
							tooltip: {},
							legend: {
								data: []
							},
							/* 设置图表x轴和y轴 */
							xAxis: {
								type: 'category',
								data: []
							},
							yAxis: {
							},
							/* 设置图表系列（数据） */
							series: [{
								name: '薪资',
								data: [],
								type: 'bar'
							}]
						};
						axios.get("/SG/SSDSelect", {
							params: {
								StandardId: this.salaryStandardId
							}
						}).then(res => {
							/* this.list = res.data; */
							var list = res.data;
							var itemNames = [];
							var salarys = [];
							list.forEach(function (item) {
								itemNames.push(item.itemName);
								salarys.push(item.salary);
							});
							option.xAxis.data = itemNames;
							option.series[0].data = salarys;
							option.legend.data = ['薪资'];

							/* 使用配置项渲染图表 */
							myChart.setOption(option);
						}).catch(err => {
							console.log(err);
						});

					});

				},
				xs: function () {
					this.dialogVisible = true;

				},
				js: function () {
					axios.get("/SG/JS", {
						params: {
							SalaryStandardId: this.salaryStandardId
						}
					}).then(res => {
						this.HumanAmount = res.data;
						console.log(this.salaryStandardId);
						console.log("ren" + res.data);
					}).catch(err => {
						console.log(err);
					});
				},
				tc: function () {
					axios.get("/SG/getSGDById", {
						params: {
							SalaryGrantId: this.salaryGrantId
						}
					}).then(res => {
						this.tableData = res.data.map(user => ({
							...user,
							list: this.list,
						}));
						console.log(res.data);
					}).catch(err => {
						console.log(err);
					});
				},
			}, computed: {
				calculateSalaryPaidSum() {
					return this.tableData.map(row => {
						const salary = row.list.reduce((total, column) => total + column.salary, 0);
						const bonus = parseFloat(row.bounsSum) || 0;
						const saleSum = parseFloat(row.saleSum) || 0;
						const deductSum = parseFloat(row.deductSum) || 0;

						row.salaryPaidSum = salary + bonus + saleSum - deductSum; // 更新 salaryPaidSum 字段
						this.SalaryPaidSum = row.salaryPaidSum;
						return row.salaryPaidSum;
					});
				},
			}, mounted: function () {
				this.salaryStandardId = localStorage.getItem("salaryStandardId");
				this.salaryGrantId = localStorage.getItem("salaryGrantId");
				this.tc();
				this.dialogVisible = true;
				this.tk();
				this.js();
			}
		});
	</script>
	<SCRIPT type="text/javascript">

		// function countMoney(button) {
		// 	var row = button.parentNode.parentNode; // 获取当前行<tr>元素
		// 	var bounsSum = row.querySelector('input[name="BounsSum"]').value;
		// 	var saleSum = row.querySelector('input[name="SaleSum"]').value;
		// 	var deductSum = row.querySelector('input[name="DeductSum"]').value;
		// 	var salaryPaidSum = row.querySelector('input[name="SalaryPaidSum"]');
		// 	/* var salaryStandardSum = row.querySelector('span[id="SalaryStandardSum"]'); */
		// 	/* var salaryStandardSum = row.querySelector('input[name="SalaryStandardSum"]') */

		// 	if (isNaN(bounsSum) || bounsSum < 0 || isNaN(saleSum) || saleSum < 0 || isNaN(deductSum) || deductSum < 0) {
		// 		alert("金额填写错误!");
		// 		bounsSum.value = "0.00";
		// 		saleSum.value = "0.00";
		// 		deductSum.value = "0.00";
		// 		return;
		// 	}

		// 	// 进行计算操作
		// 	var result = Number(bounsSum) + Number(saleSum) - Number(deductSum) + Number(document.getElementById("SalaryStandardSum").value);
		// 	/* var result2 = Number(bounsSum) + Number(saleSum) + Number(deductSum) + Number(document.getElementById("SalaryStandardSum").value); */
		// 	salaryPaidSum.value = result.toFixed(2); // 更新实发金额输入框的值
		// 	/* salaryStandardSum.value = result2toFixed(2); */
		// 	/* console.log("基本：" + salaryStandardSum); */
		// }


		function time() {
			var tdate = document.getElementById("Tdate");
			var d = new Date();
			var y = d.getFullYear();
			var moth = d.getMonth() + 1;
			var date = d.getDate();
			var h = d.getHours();
			var m = d.getMinutes();
			var s = d.getSeconds();
			var hh = 20 - 1 - h;
			var mm = 60 - 1 - m;
			var ss = 60 - s;
			if (hh > 0) {
				mm = mm + 60 * hh;
			}
			if (moth < 10) {
				moth = "0" + moth;
			}
			if (date < 10) {
				date = "0" + date;
			}
			if (h < 10) {
				h = "0" + h;
			}
			if (m < 10) {
				m = "0" + m;
			}
			if (s < 10) {
				s = "0" + s;
			}
			if (mm < 10) {
				mm = "0" + mm;
			}
			if (ss < 10) {
				ss = "0" + ss;
			}

			tdate.innerHTML = y + "-" + moth + "-" + date + " " + h + ":" + m + ":" + s;
			document.getElementById("CheckTime").value = tdate.innerHTML;
		}
		window.onload = time;
		var out = window.setInterval(time, 1000);
	</SCRIPT>
</body>
</html>
